<template>
  <!-- <el-dialog
    :title="title"
    :close-on-click-modal="false"
    append-to-body
    :visible.sync="visible"
    class="jsbos-dialog jsbos-dialog_center oqBox"
    lock-scroll
    width="1000px"
  > -->
  <transition name="el-zoom-in-center">
    <div class="jsbos-preview-main">
      <div class="jsbos-common-page-header">
        <el-page-header @back="goBack" :content="content" />
        <div class="options">
          <el-button @click="goBack"> 取 消</el-button>
        </div>
      </div>

      <el-row
        :gutter="24"
        class="main"
        :style="{ margin: '0 auto', width: '100%' }"
      >
        <el-col :span="24">
          <div style="text-align: center">
            <h1>{{ orderName }}</h1>
          </div>
        </el-col>
        <el-col :span="24">
          <div style="text-align: center; width: 100%">
            <el-card
              v-for="(item, i) in dataForm"
              :key="i"
              style="
                margin-top: 5px;
                width: 800px;
                margin-left: auto;
                margin-right: auto;
              "
            >
              <el-form
                label-width="100px"
                label-position="right"
                class="centered-form"
              >
                <!-- <el-col :span="18">
                  <el-form-item label="调查项类型:">
                    <el-radio-group v-model="item.itemType" disabled size="medium">
                      <el-radio label="radio">单选</el-radio>
                      <el-radio label="multiSelect">多选</el-radio>
                      <el-radio label="writing">填报</el-radio>
                      <el-radio label="scoring">打分</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col> -->
                <el-col :span="18">
                  <el-form-item :label="`${i + 1}.`">
                    <el-input v-model="item.itemName" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="18" style="margin-left: 200px">
                  <div v-if="item.itemType == 'radio'">
                    <el-radio-group
                      v-model="item.itemResult"
                      disabled
                      class="vertical-radio-group"
                    >
                      <el-radio
                        :label="item"
                        :key="item"
                        v-for="item in item.questionItem"
                        >{{ item }}</el-radio
                      >
                    </el-radio-group>
                  </div>
                </el-col>
                <el-col :span="18" style="margin-left: 200px">
                  <div v-if="item.itemType == 'multiSelect'">
                    <el-checkbox-group
                      v-model="item.itemResult"
                      disabled
                      class="vertical-radio-group"
                    >
                      <el-checkbox
                        :label="item"
                        :key="item"
                        v-for="item in item.questionItem"
                        >{{ item }}</el-checkbox
                      >
                    </el-checkbox-group>
                  </div>
                </el-col>
                <el-col :span="18">
                  <div v-if="item.itemType == 'writing'">
                    <el-form-item label="">
                      <el-input
                        v-model="item.itemResult"
                        placeholder="请输入"
                        :style="{ width: '100%' }"
                        true
                        type="textarea"
                        :autosize="{ minRows: 3, maxRows: 4 }"
                        maxlength="225"
                        show-word-limit
                      >
                      </el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="18">
                  <div v-if="item.itemType == 'scoring'">
                    <el-form-item label="">
                      <el-rate
                        v-model="item.itemResult"
                        class="custom-rate"
                      ></el-rate>
                    </el-form-item>
                  </div>
                </el-col>
              </el-form>
            </el-card>
          </div>
        </el-col>
      </el-row>
      <!-- <div class="jsbos-common-layout-main jsbos-flex-main">
        <jsbos-table :data="dataForm" style="min-height: 500px">
          <el-table-column
            prop="itemName"
            width="auto"
            label="题目"
            align="center"
          />
          <el-table-column
            prop="itemType"
            width="50px"
            label="类型"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.itemType == 'radio'"> 单选 </el-tag>
              <el-tag v-if="scope.row.itemType == 'multiSelect'">多选 </el-tag>
              <el-tag v-if="scope.row.itemType == 'scoring'">打分 </el-tag>
              <el-tag v-if="scope.row.itemType == 'writing'">填报</el-tag>
            </template>
</el-table-column>
<el-table-column prop="itemResult" width="200px" label="答案" align="center" />
<el-table-column prop="questionItem" width="auto" label="选项" align="center">
  <template slot-scope="scope">
              <div v-if="scope.row.itemType == 'radio'">
                <el-radio-group v-model="scope.row.itemResult">
                  <el-radio-button
                    :label="item"
                    :key="item"
                    v-for="item in scope.row.questionItem"
                    disabled
                    >{{ item }}</el-radio-button
                  >
                </el-radio-group>
              </div>
              <div v-if="scope.row.itemType == 'multiSelect'">
                <el-checkbox-group v-model="scope.row.itemResultArr">
                  <el-checkbox-button
                    :label="item"
                    :key="item"
                    v-for="item in scope.row.questionItem"
                    disabled
                    >{{ item }}</el-checkbox-button
                  >
                </el-checkbox-group>
              </div>
              <div v-if="scope.row.itemType == 'writing'">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="scope.row.itemResult"
                  disabled
                >
                </el-input>
              </div>
              <div v-if="scope.row.itemType == 'scoring'">
                <el-rate
                  disabled
                  v-model="scope.row.itemResult"
                  allow-half
                  show-text
                >
                </el-rate>
              </div>
            </template>
</el-table-column>

<el-table-column prop="creatorUserId" width="150px" label="填报人" align="center" fixed="right" />
<el-table-column prop="creatorTime" width="150px" label="填报时间" align="center">
  <template slot-scope="scope">
              {{ jsbos.dateFormatDay(scope.row.creatorTime) }}
            </template>
</el-table-column>
</jsbos-table>
<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="init" />
</div> -->
    </div>
  </transition>
  <!-- </el-dialog> -->
</template>
<script>
import request from "@/utils/request";
import { isEmpty } from "@/utils/isEmpty";
export default {
  components: {},
  props: [],
  data() {
    return {
      orderName: "",
      itemIds: "",
      content: "调查项详情",
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "creatorTime",
      },
      title: "问卷结果",
      visible: false,
      dataForm: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    goBack() {
      this.$emit("refresh");
    },
    init(data) {
      this.orderName = data.orderName;
      this.dataForm.id = data.id || 0;
      this.visible = true;
      let _query = {
        ...this.listQuery,
        questionnaireOrderRangeId: data.questionnaireOrderRangeId,
      };
      request({
        url: "/api/questionnaire/OqQuestionnaireOrderRangeItem/getList",
        method: "post",
        data: _query,
      }).then((res) => {
        if (res.hasOwnProperty("data")) {
          this.dataForm = res.data.list;
          this.total = res.data.pagination.total;
        } else {
          this.dataForm = [];
          this.total = 0;
        }
      });
    },
  },
};
</script>
<style scoped>
.centered-form {
  display: flex;
  flex-direction: column;
  /* 垂直排列 */
  align-items: center;
  /* 水平居中 */
}

.vertical-radio-group {
  display: flex;
  flex-direction: column;
  text-align: left;
  /* 设置为垂直方向 */
}

.custom-rate ::v-deep .el-rate__icon {
  font-size: 33px;
  /* 调整星星的大小 */
}
</style>
